<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item class="infinite-list-item"    v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
        <el-card style="padding: 20px">
          <a class="fl" @click="gotoroute(item.routeId)">
            <h3>{{ item.title }}</h3>
          <p v-html="item.content"></p>
          </a>

          <span class="f-r" style="margin-top: 50px">
            <time class="m-r-10">{{item.startTime}} 至 {{item.endTime}}</time>
            <span v-if="item.status==0" >
            <el-tag
              key="完成"
              type="success"
              effect="dark">完成</el-tag></span>
          </span>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  props:['timeline'],
  data() {
    return{
      timeline:[
        {
          routeId:"",
          timestamp: '2021-04-05',
          title: '路径名称',
          content: '路径规则说明',
          startTime:"2021-01-02",
          endTime:"2021-03-05",
          status:1,//路径完成状态，1-完成，
        },
      ]
    }

    },
  methods:{
    gotoroute(routeid){
      this.$router.push({
          path: "/routeDetailInfo/routeDetialInfo",
          name: "routeDetialInfo",
          query: {
            val:routeid,
            }
      });

    },
  }
}
</script>
<style lang="scss" scoped>
  @import "../../../styles/common.css";
  .el-card ::v-deep .el-card__body {
      padding: 0px;
  }
  .infinite-list {
    height: 510px;
    list-style: none;
  }
</style>
